<template>
  <div class="basic">
    <el-table :data="activities" stripe>
      <el-table-column
      type="index"
      width="50">
    </el-table-column>
      <el-table-column prop="bvalue" label="名称" width="150" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="bname" label="内容" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="bremarks" label="备注" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="primary" plain size="mini" @click="detailsData(scope.row)">详情</el-button>
          <el-button type="danger" plain size="mini" @click="deleteData(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer
      title="展示项目内容修改"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="ttb"
      size="100%"
      custom-class="demo-drawer"
      ref="drawer"
      >
      <div class="demo-drawer__content">
          <el-form label-width="5%" :model="formData" class="demo-drawer_el_form" style="margin-bottom: 7px;">
            <el-card style="background-color:rgba(255,255,255,0.5);height: 600px;">
                    <el-form-item label="名称">
                      <el-input v-model="formData.bvalue" clearable placeholder="请填写名称"></el-input>
                    </el-form-item>
                    <el-form-item label="内容">
                      <el-input v-model="formData.bname" clearable placeholder="请填写内容"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                      <el-input
                        type="textarea"
                        :autosize="{ minRows: 1, maxRows: 5}"
                        v-model="formData.bremarks" clearable placeholder="请填写备注"></el-input>
                    </el-form-item>
            </el-card>
          </el-form>
          <div class="demo-drawer__footer">
            <el-button round type="info" @click="cancelForm">退 出</el-button>
            <el-button round type="warning" @click="resetForm(formData)">重 置</el-button>
            <el-button round type="success" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
          </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import basic from "@/model/basic";

export default {
  name: "basic",
  components: {},
  data() {
    return {
      activities: [],

      formData:{},
      dialog: false,
      loading: false,
      formLabelWidth: '80px',
      timer: null,
    };
  },
  async mounted() {
    this.onRefresh();
  },
  methods: {
    async onRefresh(){
      const res = await basic.getDetail();
      this.activities = res.data;
    },
    async detailsData(data){
      const res = await basic.getId(data.id);
      this.formData = res.data;
      this.dialog = true
    },
    async deleteData(data){
      this.$confirm('此操作将删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let res =  basic.deleteData(data.id);
          this.onRefresh();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
      });
    },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm('确定要提交表单吗？')
        .then(_ => {
          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            // 动画关闭需要一定的时间
            setTimeout(() => {
              this.loading = false;
            }, 400);
            const res = basic.updata({
              data:this.formData
            });
            this.onRefresh();
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
          }, 2000);
        })
        .catch(_ => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },
    async resetForm(data) {
      const res = await basic.getId(data.id);
      this.formData = res.data;
    }
  },
};
</script>

<style>
  .demo-drawer{
    background-color: cyan;
  }
  .demo-drawer_el_form{
  }
</style>

